<!DOCTYPE html>
<html>

<head>
    <title>倩狐OA办公系统</title>
    <!--#include virtual ="/ui/oa2/inc/head.html"-->
</head>

<body>
<div id="app">
    <div class="canvas" ref="js-canvas"></div>
</div>
</body>
<script>
    let vm = {
        data: {
            bpmnViewer: null,
            getXml: {
                xurl: "/flow/flow/getXml",
                id: 1,
                autoLoad: true,
                afterQuery: function (json) {
                    this.parent.openDiagram(json.data.xmlTxt);
                }
            },
        },
        mounted: function () {
            let canvas = this.$refs['js-canvas'];
            this.bpmnViewer = new bpmn.BpmnViewer({
                container: canvas
            });
        },
        methods: {
            openDiagram(xml) {
                let that = this;
                that.bpmnViewer.importXML(xml, function (err) {
                    if (err) {
                        console.error(err);
                    } else {
                        const eventBus = that.bpmnViewer.get('eventBus');
                        const elementFactory = that.bpmnViewer.get('elementFactory');
                        const modeling = new bpmn.Modeling(eventBus, elementFactory);
                        that.addBpmnListener(modeling);
                    }
                });
            },
            addBpmnListener(modeling) {
                let that = this;
                const eventBus = that.bpmnViewer.get('eventBus');
                const events = [
                    'element.click',
                    'element.dblclick'
                ];
                events.forEach(function (event) {
                    eventBus.on(event, function (e) {
                        if (e.element.type == 'bpmn:Process' || e.element.type == 'bpmn:Lane')
                            return;
                        var elementRegistry = that.bpmnViewer.get('elementRegistry');
                        var shape = elementRegistry.get(e.element.id);
                        console.log(shape.businessObject.id,shape.businessObject)
                    });
                });

                eventBus.on("element.delete", function (e) {
                    var elementRegistry = that.bpmnViewer.get('elementRegistry');
                    var shape = elementRegistry.get(e.element.id);
                    console.log(e.element.type, shape.businessObject.id);
                });

            }
        }
    }
</script>
<style>
    .canvas {
        height: 100%;
    }
</style>
</html>